import React from 'react'
import Home from './pages/Home'
import About from './pages/About'
// Route是真实配置前端路由的组件
// Routes只是用来包裹Route的
// Link组件在页面上最终渲染的是一个a标签,用户可以点击,点击之后就修改路径但不发送请求
import { Routes, Route, Link } from 'react-router-dom'
export default function App() {
  return (
    <div>
      App
      <hr />
      <h1>react-router-dom</h1>
      {/* Link必须写to属性，to属性的值，就是目标路径。 注意：Link组件子节点位置必须写描述文本，不写的话，在页面上就看不见 */}
      <Link to="/home">首页</Link> &nbsp; &nbsp;
      <Link to="/about">关于页</Link>
      <hr />
      {/* 前端路由规则所对应的组件想要渲染到哪里,则配置Route的代码就写在哪里 */}
      <Routes>
        <Route path="/home" element={<Home></Home>}></Route>
        <Route path="/about" element={<About></About>}></Route>
      </Routes>
      <hr />
    </div>
  )
}
